<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
    <title>考评页面</title>
    <link rel="stylesheet" href="{{asset('/addons/jquery-weui-build/css/weui.min.css')}}">
    <link rel="stylesheet" href="{{asset('/addons/jquery-weui-build/css/jquery-weui.css')}}">
    <link rel="stylesheet" href="/css/system/front-iconfont.css?v=2018121301">
    <link rel="stylesheet" href="{{asset('/css/system/common.css')}}">
    <link rel="stylesheet" href="{{asset('/css/system/index-view.css')}}">
    <style>
        body{
            background: #fff;
        }

    </style>
</head>
<body ontouchstart>
<div class="index-review">
    <div class="header-bk">
        <div class="con-head">
            <img src={{file_exists($_SERVER["DOCUMENT_ROOT"]."/uploads/uploads/images/user_logo/".$perf->user_id.'.png') ?"/uploads/images/user_logo/".$perf->user_id.'.png?'.rand(100, 9999) :'/img/list-demo1.png'}}><span class="user-name">{{getUserName($perf->user_id)}}</span>
        </div>
        <div class="list-content">
            <div class="section-li">
                <span class="circl-span"></span>
                <p>综合绩效</p>
                <p class="score-list">{{$perf->total}}</p>
            </div>
            <div class="section-li" @if($myuid == $perf->user_id) onclick="window.location.href='/user/achievement'" @endif>
                <span class="circl-span sec-circle"></span>
                <p>业绩</p>
                <p class="score-list">{{$perf->yeji}}</p>
            </div>
            <div class="section-li" @if($myuid == $perf->user_id)  onclick="window.location.href='/user/attendance'" @endif>
                <span class="circl-span third-circle"></span>
                <p>考勤</p>
                <p class="score-list">{{$perf->kaoqin}}</p>
            </div>
            <div class="section-li" @if($myuid == $perf->user_id)  onclick="window.location.href='/user/reward/index'" @endif>
                <span class="circl-span third-circle"></span>
                <p>奖惩</p>
                <p class="score-list">{{$perf->jiangcheng}}</p>
            </div>
        </div>
    </div>
    <p class="p-title">月度意见</p>
    <div class="echart-contain" style="width: 360px;height: 280px;margin: 0 auto;">
        <div id="part" style="width: 360px;height: 260px; padding-top: 20px;">
            <canvas id="myCanvas" width="1080" height="780"
                    style="width: 360px;height:260px;">
            </canvas>
        </div>
    </div>
    <p class="p-title">年度考评</p>
    <div class="echart-contain" style="width: 300px;height: 300px;margin: 1rem auto 0 auto;">
        <div id="part2" style="width: 300px;height: 300px;">
        </div>
    </div>
</div>
@include('frontuser.caidan')
<script src="{{asset('/kaohe/js/jquery-2.1.4.min.js')}}"></script>
<script src="{{asset('/addons/jquery-weui-build/js/fastclick.js')}}"></script>

<script>
    $(function() {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
        FastClick.attach(document.body);
    });
</script>
<script src="{{asset('/addons/jquery-weui-build/js/jquery-weui.min.js')}}"></script>
<script>

    var data_name_df = ["学习能力","合作精神","主动性","专业性","敬业精神"];
    var data_value_df = [4.1,4.4,4.8,5,4];
    var old_value = [4.1,4.4,4.8,5,4];
    console.log(data_value_df);
    console.log(data_name_df);
    var data_index = [];
    //alert(data_value[1]);

    data_value_df.map(function(value,index){
        data_value_df[index] = Math.round((120-45)/5*value)+(index+1)/10;
    });
    console.log(data_value_df);

    data_value_df.sort();
    old_value.sort();
    data_value_df.map(function(value,index){
        data_index.push(data_value_df[index].toString().replace(/\d+\.(\d*)/,"$1"));
        data_value_df[index] =  parseInt(data_value_df[index]);
    });
    console.log(data_index);
    console.log(data_value_df);
    var data_value = [data_value_df[3],data_value_df[1],data_value_df[4],data_value_df[2],data_value_df[0],];
    var data_value_old = [old_value[3],old_value[1],old_value[4],old_value[2],old_value[0],];
    var data_name = [data_name_df[data_index[3]-1],data_name_df[data_index[1]-1],data_name_df[data_index[4]-1],data_name_df[data_index[2]-1],data_name_df[data_index[0]-1],];
    console.log(data_value);
    console.log(data_name);
    console.log(data_value_old);



    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");


    var getPixelRatio = function (ctx) {
        var backingStore = ctx.backingStorePixelRatio ||
                ctx.webkitBackingStorePixelRatio ||
                ctx.mozBackingStorePixelRatio ||
                ctx.msBackingStorePixelRatio ||
                ctx.oBackingStorePixelRatio ||
                ctx.backingStorePixelRatio || 1;
        return (window.devicePixelRatio || 1) / backingStore;
    };
    var ratio = getPixelRatio(ctx);
    ctx.scale(ratio, ratio);

    ctx.fillStyle = "#f8f8f8";
    /*ctx.lineWidth = 10;
    ctx.beginPath();
    ctx.arc(150, 120, 45, 0, Math.PI*2, true);
    /!*ctx.moveTo(150, 120);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);*!/
    ctx.stroke();
    ctx.closePath();*/





    ctx.arc(150, 140, 140, 0, Math.PI*2, true);
    ctx.arc(150, 140, 45, 0, Math.PI*2, true);
    ctx.fill("evenodd");
    ctx.fillStyle = "#e4e5e7";
    ctx.beginPath();
    ctx.arc(150, 140, 45, 0, Math.PI*2, true);
    ctx.arc(150, 140, 15, 0, Math.PI*2, true);
    ctx.fill("evenodd");

   /* ctx.fillStyle = "#fbb263";
    ctx.beginPath();
    ctx.arc(150, 140, 45, 0, Math.PI*2/5, false);
    ctx.arc(150, 140, 15, 0, Math.PI*2/5, false);
    ctx.stroke();*/


    var lingrad2 = ctx.createLinearGradient(0,50,0,95);
    lingrad2.addColorStop(0.5, '#fff');
    lingrad2.addColorStop(1, 'rgba(20,70,0,1)');




    //1
    var x1 = data_value[0];
    ctx.strokeStyle = "#fbb263";
    //ctx.strokeStyle = lingrad2;
    //ctx.strokeStyle = "rgba(255,0,0,0.2)";
    ctx.lineWidth = x1; // 线的粗细
    ctx.beginPath();
    ctx.arc(150,140, 45+x1/2, (Math.PI*14-3)/12, (Math.PI*20-3)/12, false); //画圆
    ctx.stroke();
    ctx.closePath();

    /*ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    ctx.shadowBlur = 2;
    ctx.shadowColor = "rgba(0, 0, 0, 0.2)";*/

    /*var x7 = 60;
    ctx.strokeStyle = "rgba(73,151,138,1)";
    ctx.lineWidth = x7; // 线的粗细
    ctx.beginPath();
    ctx.arc(150,140, 45+x7/2, (Math.PI*9-2)/6, (Math.PI*9-2+0.5)/6, false); //画圆
    ctx.stroke();
    ctx.closePath();*/




    //2
    var x2 = data_value[1];
    ctx.strokeStyle = "#fff4b4";
    ctx.lineWidth = x2; // 线的粗细
    ctx.beginPath();
    ctx.arc(150,140, 45+x2/2, (Math.PI*20-3)/12, (Math.PI*23-3)/12, false); //画圆
    ctx.stroke();
    ctx.closePath();


    var x7 = data_value[1];
    ctx.strokeStyle = "rgba(253,222,139,1)";
    ctx.lineWidth = x7; // 线的粗细
    ctx.beginPath();
    ctx.arc(150,140, 45+x7/2, (Math.PI*20-3)/12, (Math.PI*20-3+0.8)/12, false); //画圆
    ctx.stroke();
    ctx.closePath();


    var x8 = data_value[1];
    ctx.strokeStyle = "rgba(253,222,139,1)";
    ctx.lineWidth = x8; // 线的粗细
    ctx.beginPath();
    ctx.arc(150,140, 45+x7/2, (Math.PI*23-3-0.6)/12, (Math.PI*23-3)/12, false); //画圆
    ctx.stroke();
    ctx.closePath();

    //3
    var x3 = data_value[2];
    ctx.strokeStyle = "#49978a";
    ctx.lineWidth = x3; // 线的粗细
    ctx.beginPath();
    ctx.arc(150,140, 45+x3/2, (Math.PI*23-3)/12, (Math.PI*28-3)/12, false); //画圆
    ctx.stroke();
    ctx.closePath();

   /* var x9 = 60;
    ctx.strokeStyle = "rgba(93,187,171,1)";
    ctx.lineWidth = x9; // 线的粗细
    ctx.beginPath();
    ctx.arc(150,140, 45+x9/2,  Math.PI*13/6, (Math.PI*13+0.3)/6, false); //画圆
    ctx.stroke();
    ctx.closePath();*/

    //4
    /*var x4 = 60;
    ctx.strokeStyle = "#7fe0cd";
    ctx.lineWidth = x4; // 线的粗细
    ctx.beginPath();
    ctx.arc(150,140, 45+x4/2, (Math.PI*13+0.3)/6, (Math.PI*15-3)/6, false); //画圆
    ctx.stroke();
    ctx.closePath();*/

   /* var x10 = 60;
    ctx.strokeStyle = "rgba(93,187,171,1)";
    ctx.lineWidth = x10; // 线的粗细
    ctx.beginPath();
    ctx.arc(150,140, 45+x10/2, (Math.PI*15-3)/6, (Math.PI*15-3+0.5)/6, false); //画圆
    ctx.stroke();
    ctx.closePath();*/

    //5
    var x5 = data_value[3];
    ctx.strokeStyle = "#a6e8a1";
    ctx.lineWidth = x5; // 线的粗细
    ctx.beginPath();
    ctx.arc(150,140, 45+x5/2, (Math.PI*28-3)/12, (Math.PI*35-3)/12, false); //画圆
    ctx.stroke();
    ctx.closePath();

    var x9 = data_value[3];
    ctx.strokeStyle = "rgba(140,208,135,1)";
    ctx.lineWidth = x9; // 线的粗细
    ctx.beginPath();
    ctx.arc(150,140, 45+x9/2, (Math.PI*28-3)/12, (Math.PI*28-3+0.6)/12, false); //画圆
    ctx.stroke();
    ctx.closePath();

    /*var x11 = 60;
    ctx.strokeStyle = "rgba(253,222,139,1)";
    ctx.lineWidth = x11; // 线的粗细
    ctx.beginPath();
    ctx.arc(150,140, 45+x11/2, (Math.PI*17)/6,  (Math.PI*17+0.3)/6, false); //画圆
    ctx.stroke();
    ctx.closePath();*/


    //6
    var x6 = data_value[4];
    ctx.strokeStyle = "#7fe0cd";
    ctx.lineWidth = x6; // 线的粗细
    ctx.beginPath();
    ctx.arc(150,140, 45+x6/2, (Math.PI*35-3)/12,(Math.PI*14-3)/12, false); //画圆
    ctx.stroke();
    ctx.closePath();

    var x10 = data_value[4];
    ctx.strokeStyle = "rgba(104,199,181,1)";
    ctx.lineWidth = x10; // 线的粗细
    ctx.beginPath();
    ctx.arc(150,140, 45+x10/2, (Math.PI*35-3)/12, (Math.PI*35-3+0.6)/12, false); //画圆
    ctx.stroke();
    ctx.closePath();

    var x11 = data_value[4];
    ctx.strokeStyle = "rgba(104,199,181,1)";
    ctx.lineWidth = x11; // 线的粗细
    ctx.beginPath();
    ctx.arc(150,140, 45+x11/2, (Math.PI*14-3-0.6)/12, (Math.PI*14-3)/12, false); //画圆
    ctx.stroke();
    ctx.closePath();
/*
    var x12 = 60;
    ctx.strokeStyle = "rgba(253,222,139,1)";
    ctx.lineWidth = x12; // 线的粗细
    ctx.beginPath();
    ctx.arc(150,140, 45+x12/2, (Math.PI*19-2.6)/6, (Math.PI*19-2)/6, false); //画圆
    ctx.stroke();
    ctx.closePath();*/




    ctx.font = "12px";
    ctx.fillStyle = "white";
    ctx.fillText(data_value_old[0], 112, 66);
    ctx.fillText(data_name[0], 82, 78);

    ctx.fillStyle = "#fbb263";
    ctx.fillText(data_value_old[1], 190, 80);
    ctx.fillText(data_name[1], 180, 92);

    ctx.fillStyle = "white";
    ctx.fillText(data_value_old[2], 220, 150);
    ctx.fillText(data_name[2], 210, 162);

    ctx.fillText(data_value_old[3], 110, 210);
    ctx.fillText(data_name[3], 130, 210);



    ctx.fillText(data_value_old[4], 66, 144);
    ctx.fillText(data_name[4], 56, 158);

    /*ctx.fillStyle = "#fbb263";
    ctx.fillText("2", 76, 150);
    ctx.fillText("合作精神", 60, 162);*/




















    $('.kaohe-item').click(function(){
        $('.front-show-hidden').toggle();
    })
    $('.set-btn').click(function () {
        $('.set-hidden').toggle();
    })
//    $('.find-link').click(function () {
//        $('.show-hidden').toggle()
//    });

    
</script>
</body>
</html>